:root {
	--col_background: snow;
	--col_contrast: #161616;
	--col_text: #161616;
	--col_headers: #8aca1d;
	--col_links: #323629;
	--col_linkhover: snow;
	--col_logos: #beef69;
}

@media (prefers-color-scheme: dark) {
:root {
	--col_background: #161616;
	--col_text: snow;
	--col_contrast: snow;
	--col_headers: #8aca1d;
	--col_links: #8aca1d;
	--col_linkhover: #8aca1d;
	--col_logos: #beef69;
	}
}

body {
	background-color: var(--col_background);
	font-family: monospace;
	font-size: 0.9rem; 
	color: var(--col_text);
	max-width: 68rem;
	margin: auto;
	}

header, section, footer, .subsection {
    border: 3px solid var(--col_text);
    padding: 1em;
    margin: 1em;
}

footer {
    text-align: center;
}

blockquote {
    background-color: var(--col_contrast);
    color: var(--col_background);
    box-shadow: 5px 5px var(--col_headers);
    margin: 2em 1em 1em 1em;
    padding: 1em;
    font-family: monospace;
    transform: rotate(2deg);
    transform-origin: bottom right;
}

nav {
    text-align: center;
    margin-bottom: 1.3em;
}

nav ul li {
    display: inline;
    list-style-type: none;
}

nav ul li a {    
    color: var(--col_contrast);
    text-decoration: none;
    padding: .5em;
    margin: .5em;
    border: 2px solid var(--col_contrast);
    box-shadow: 3px 3px var(--col_contrast);
}

nav ul li a:hover {
    background-color: var(--col_contrast);
    color: var(--col_linkhover);
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: 3px 3px var(--col_headers);
    cursor: crosshair;
}

a {
    color: var(--col_links);
    text-decoration: underline;
}

a:hover {
    background-color: var(--col_headers);
    color: var(--col_linkhover);
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
}

header h1 {
    font-size: 2.5em;
}

h1 {
    letter-spacing: .3em;
    text-align: center;
    margin-bottom: 1em;
    color: var(--col_headers);
    text-transform: uppercase;
    text-shadow: 3px 3px var(--col_contrast);
}


h2 {
    text-transform: uppercase;
    text-align: center;
    margin-bottom: .5em;
    box-shadow: 3px 3px var(--col_contrast);
    background-color: var(--col_headers);
}

h3 {
    margin-bottom: .5em;
    background-color: var(--col_headers);
    text-align: center;
    padding: .2em;
    text-transform: uppercase;
    box-shadow: 3px 3px var(--col_contrast);
}

p {
    margin: .5em 0;
}

/* added */
.eggmilk {
	display: flex;
	flex-wrap: column wrap;
	justify-content: flex-start;
}

@media (max-width: 600px) {
	nav ul li {
		line-height: 3em;
		}
	}

@media (min-width: 800px) {
	body { font-size: 1rem; } 
	.eggmilk {
		flex-wrap: row nowrap;
		}
	}
	
/* buttons */
#button_bxm { border: 2px solid transparent; }
#button_bxm:hover {
	border-color: #ff6600;
	}